export const setOverlaysHtmlToString = (element: any, hoverData: any) => {
    const elementType = element?.type;
    let _html: any;
    switch (elementType) {
        case 'bpmn:StartEvent':
        case 'bpmn:EndEvent':
        case 'bpmn:CallActivity':
        case 'bpmn:ExclusiveGateway':
        case 'bpmn:ParallelGateway':
        case 'bpmn:InclusiveGateway':
            _html = `<div class='process-overlays-wrapper'>
                <div class='process-overlays-arrow'>
                    <span class='process-overlays-arrow-content'></span>
                </div>
                <div class='process-overlays'>
                    <div class='process-overlays-content'>
                        <div class='process-overlays-content-item'>
                            <div class='process-overlays-content-item-label'>
                                节点名称
                            </div>
                            <div class='process-overlays-content-item-value'>
                                ${hoverData?.activityName ?? ''}
                            </div>
                        </div>
                        <div class='process-overlays-content-item'>
                            <div class='process-overlays-content-item-label'>
                                节点类型
                            </div>
                            <div class='process-overlays-content-item-value'>
                                ${hoverData?.activityType ?? ''}
                            </div>
                        </div>
                    </div>
                </div>
            </div>`;
            break;
        case 'bpmn:UserTask':
            _html = `<div class='process-overlays-wrapper'>
                <div class='process-overlays-arrow'>
                    <span class='process-overlays-arrow-content'></span>
                </div>
                <div class='process-overlays userTask'>
                    <div class='process-overlays-content'>
                        <div class='process-overlays-content-item'>
                            <div class='process-overlays-content-item-label'>
                                节点名称
                            </div>
                            <div class='process-overlays-content-item-value'>
                                ${hoverData?.activityName ?? ''}
                            </div>
                        </div>
                        <div class='process-overlays-content-item'>
                            <div class='process-overlays-content-item-label'>
                                节点类型
                            </div>
                            <div class='process-overlays-content-item-value'>
                                ${hoverData?.activityType ?? ''}
                            </div>
                        </div>
                        ${hoverData?.activityAssignees && `<div class='process-overlays-content-item'>
                            <div class='process-overlays-content-item-label'>
                                执行人
                            </div>
                            <div class='process-overlays-content-item-value'>
                                ${hoverData?.activityAssignees ?? ''}
                            </div>
                        </div>`}
                    </div>
                </div>
            </div>`;
            break;
        default:
            break;
    }
    return _html;
};

export const getOverlaysPosition = (element: any) => {
    const elementType = element?.type;
    let _left = 0;
    let _top = 0;
    switch (elementType) {
        case 'bpmn:StartEvent':
        case 'bpmn:EndEvent':
            _left = -10;
            _top = 60;
            break;
        case 'bpmn:UserTask':
        case 'bpmn:CallActivity':
            _left = 0;
            _top = 76;
            break;
        case 'bpmn:ExclusiveGateway':
        case 'bpmn:ParallelGateway':
        case 'bpmn:InclusiveGateway':
            _left = -1;
            _top = 76;
            break;
        default:
            break;
    };
    return {
        left: _left,
        top: _top,
    };
};